<template>
    <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme="theme">
        <n-loading-bar-provider>
            <Loading></Loading>
            <n-notification-provider>
                <Notification></Notification>
                <n-message-provider placement="bottom-right">
                    <Message></Message>
                    <n-dialog-provider>
                        <Dialog></Dialog>
                    </n-dialog-provider>
                </n-message-provider>
            </n-notification-provider>
        </n-loading-bar-provider>
    </n-config-provider>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { NConfigProvider, NDialogProvider, NNotificationProvider, NMessageProvider, NLoadingBarProvider } from 'naive-ui'
import { zhCN, dateZhCN, darkTheme } from 'naive-ui'
import store from '@/store'
import { AllStateTypes } from '@/store/interface'

import Message from './Message.vue'
import Dialog from './Dialog.vue'
import Loading from './Loading.vue'
import Notification from './Notification.vue'

export default defineComponent({
    name: 'Provider',
    components: {
        NConfigProvider,
        NDialogProvider,
        NNotificationProvider,
        NMessageProvider,
        NLoadingBarProvider,
        Message,
        Dialog,
        Loading,
        Notification,
    },
    setup() {
        const theme = computed(() => ((store.state as AllStateTypes).theme.dark ? darkTheme : undefined))
        return { theme, zhCN, dateZhCN }
    },
})
</script>
